<template>
  <div class="container mx-auto">
    <div class="w-1/3 mx-auto mt-20 p-6 shadow-lg shadow-blue-gray-300 rounded-lg">
      <h2>登录 - 广城大机械协会物资管理系统</h2>
      <n-form @submit.prevent="onSubmit" ref="formRef" :model="model" :rules="rules">
        <n-form-item path="user" label="账户">
          <n-input placeholder="请输入账户" v-model:value="model.user" @keydown.enter.prevent />
        </n-form-item>
        <n-form-item path="password" label="密码">
          <n-input
            placeholder="请输入密码"
            v-model:value="model.password"
            type="password"
            @keydown.enter.prevent
          />
        </n-form-item>
        <n-form-item>
          <n-button attr-type="submit" type="primary">登录</n-button>
        </n-form-item>
      </n-form>
    </div>

    <div class="text-center mt-10 text-sm text-gray-500">
      &copy; 2023-{{ new Date().getFullYear() }} 广西城市职业大学机械协会
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { NForm, NFormItem, NInput, NButton } from 'naive-ui'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'

const router = useRouter()

const model = ref({
  user: '450923200005080315',
  password: '080315',
  type: 'h5'
})

const { Login } = useUserStore()

const rules = ref({
  user: {
    required: true,
    message: '请输入账户',
    trigger: 'blur'
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }
})

async function onSubmit() {
  const userInfo = await Login(model.value as LoginParams)
  if (userInfo) {
    window.$message.success(`登录成功,${userInfo.profile.name} 欢迎回来！`)
    setTimeout(() => {
      router.push('/dashboard')
    }, 500)
  }
  return
}
</script>
